import React from "react";
import ReactEcharts from 'echarts-for-react';
import { Card } from 'antd';
import './user-Analysis.scss'

const gridStyle = {
    width: '25%',
    textAlign: 'center',
  };
export default function UserAnalysis(){
    const getOption = ()=>{
        return(
            {
                title: {
                  text: '用户性别比例',
                  left: 'center'
                },
                tooltip: {
                  trigger: 'item'
                },
                legend: {
                  orient: 'vertical',
                  left: 'left'
                },
                series: [
                  {
                    name: '用户性别比例',
                    type: 'pie',
                    radius: '50%',
                    data: [
                      { value: 300, name: '男' },
                      { value: 478, name: '女' }
                    ],
                    emphasis: {
                      itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
              }
    
        )
    }
    
        const atOption = ()=>{
          
          return(
            {
              title: {
                text: '音乐类型-乐种分布',
                left: 'center'
              },
            xAxis: {
                type: 'category',
                data: ['华语', '粤语', '欧美', '日韩', '摇滚', '轻音乐', 'RAP']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [
                    {
                      value: 300,
                      itemStyle: {
                        color: '#a90000'
                      }
                    },
                    150,
                    80,
                    70,
                    110,
                    130,
                    100
                  ],
                  type: 'bar'
                }
              ]
            }
          )
        }
    
        const sinOption = ()=>{
          return(
            {
              title: {
                text: '用户年龄分布',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              series: [
                {
                  name: '用户年龄分布',
                  type: 'pie',
                  radius: '50%',
                  data: [
                    { value: 32 ,name: '12-17' },
                    { value: 50, name: '18-24' },
                    { value: 13, name: '25-28' },
                    { value: 5, name: '28-35' },
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            }
          )
        }
    
        const CunOption = ()=>{
          return(
            {
              title: {
                text: '用户地区统计',
                left: 'center'
              },
            xAxis: {
                type: 'category',
                data: ['国内', '东南亚', '欧美', '北美','其他地区']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [
                    {
                      value: 72,
                      itemStyle: {
                        color: '#a90000'
                      }
                    },
                    8,
                    15,
                    8,
                    7

                  ],
                  type: 'bar'
                }
              ]
            }
          )
        }

        const winOption = ()=>{
            return(
              {
                title: {
                  text: '用户来源统计',
                  left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                  },
                  legend: {
                    orient: 'vertical',
                left: 'left'
                  },
                  series: [
                    {
                      name: 'Access From',
                      type: 'pie',
                      radius: ['40%', '70%'],
                      avoidLabelOverlap: false,
                      itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                      },
                      label: {
                        show: false,
                        position: 'center'
                      },
                      emphasis: {
                        label: {
                          show: true,
                          fontSize: '40',
                          fontWeight: 'bold'
                        }
                      },
                      labelLine: {
                        show: false
                      },
                      data: [
                        { value: 1048, name: 'APP' },
                        { value: 735, name: '微信' },
                        { value: 580, name: 'QQ' },
                        { value: 484, name: '投放广告' },
                        { value: 300, name: '网页' }
                      ]
                    }
                  ]
              }
            )
          }
    
    return (
        <div className="first">
            <div className="first-top">
              <Card.Grid style={gridStyle}>
                <h2>1.11万</h2>
                <div>日活量</div>
              </Card.Grid>
              <Card.Grid style={gridStyle}>
              <h2>88.88万</h2>
                <div>月活量</div>
              </Card.Grid>
              <Card.Grid style={gridStyle}>
              <h2>会员用户</h2>
                <div>6.66万</div>
              </Card.Grid>
            </div>
            <div className="first-center">
                <div className="first-center-left">
                  <ReactEcharts option={getOption()} theme="imooc"></ReactEcharts>
                </div>
                <div className="first-center-right">
                    <ReactEcharts option={atOption()} theme="imooc"></ReactEcharts>
                </div>
            </div>
            <div className="first-center">
                <div className="first-center-left">
                  <ReactEcharts option={sinOption()} theme="imooc"></ReactEcharts>
                </div>
                <div className="first-center-right">
                    <ReactEcharts option={CunOption()} theme="imooc"></ReactEcharts>
                </div>
            </div>
            <div className="first-center">
                <div className="first-center-left">
                  <ReactEcharts option={winOption()} theme="imooc"></ReactEcharts>
                </div>
            </div>
          
        </div>
    )
}








